class MyCard extends HTMLElement {
  static style = `
    .card {
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      padding: 20px 30px;
      position: relative;
      display: inline-block;
      width: auto;  
    }

    .card-header {
      display: none;
      border-bottom: 1px solid #ccc;
      margin-bottom: 10px;
      padding-bottom: 5px;
    }
  `

  constructor() {
    super()
  }

  connectedCallback() {
    const shadow = this.attachShadow({ mode: "open" })
    this.render(shadow)
  }

  render(shadow) {
    let tmp = document.createElement("template")
    tmp.innerHTML = `
      <div class="card">
        <div class="card-header" part="card-header">
          <slot name="card-header"></slot>
        </div>
        <div class="card-body" part="card-body">
          <slot name="card-body"></slot>
        </div>
      </div>
    `
    tmp.setAttribute("id", "my-card-template")
    document.body.appendChild(tmp)

    shadow.appendChild(
      document.getElementById("my-card-template").content.cloneNode(true)
    )

    let style = document.createElement("style")
    style.innerHTML = MyCard.style
    shadow.appendChild(style)

    this.headerShow()
  }

  headerShow() {
    if (this.querySelector(["[slot='card-header']"])) {
      this.shadowRoot.querySelector(".card-header").style.display = "block"
    }
  }
}

customElements.define("my-card", MyCard)

export default MyCard
